<template>
    <son3></son3>

    <h1>调用传送门</h1>

    <!--<teleport to="#modal">
        <b>传送门定义的内容</b>
    </teleport>-->

    <!--异步组件-->
    <Suspense>
      <!--请求完毕后-->
      <template #default>
          <child />
      </template>

      <!--正在请求中-->
      <template #fallback>
          <h1>loading.....</h1>
      </template>
    </Suspense>

</template>

<script>
  import {ref, provide, defineAsyncComponent} from 'vue'

  //引入子组件
  import son3 from './son3.vue'

  //静态引入子组件
  const child = defineAsyncComponent(() => import("./child.vue"))

  export default {
    name: 'Vue3Index',
    emits: ['toggle'], //定义说明父组件的自定义事件
    created()
    {
      this.$emit('toggle', false);
    },
    setup()
    {
      //需要传递的属性
      const name = ref('张三')

      var fun = () => {
        console.log('需要传递的方法')
      }

      //传递给子组件
      provide('name', name)
      provide('fun', fun)
    },
    components:{
      son3,
      child
    }
  }
</script>